﻿@model TWCRM.Models.Home.ProductModel
@{
    Layout = "/Views/Shared/_SubLayout.cshtml";
    ViewBag.Title = "產品";
}
<style>
    .metro_input_dropdownselect li
    {
        padding:3px 0pt 3px 16px;
    }
    .metro_input_dropdownselect
    {
        max-height:300px;
        overflow:auto;
    }
    
    .productTypeValue
    {
        display:inline-block;
    }
</style>
<script>
    var isNew = true;
    $(document).ready(function () {
        isNew = $.url().param('id') == undefined;

        if (isNew)
            $('.metro_input_contain input:first').focus();

        $.fn.metro.onPrevClick = function () {
            window.history.go(-1);
        };

        adjustMetroInputContain();
        showLoading();
        loadProductTypes();
    });
</script>
<script id="treeNodeTemplate" type="text/x-jquery-tmpl">
    {{if Children.length}}
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            <div class="treeNode" productTypeID="${ID}" productTypeFullName="${FullName}">${Name}</div>
            <ul style="display: none;">
                {{tmpl(Children) "#treeNodeTemplate"}}
            </ul>
        </li>
    {{else}}
        <li>
            <div class="treeNode" productTypeID="${ID}" productTypeFullName="${FullName}">${Name}</div>
        </li>
    {{/if}}
</script>
<div id="ProductEdit">
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(m => m.ID)
        @Html.HiddenFor(m => m.IsNew)
        <div class="metro_toolbar">
            <div class="metro_input_contain">
                <a class="metro_input_btn" onclick="confirm()">儲存產品</a>
            </div>
        </div>
        <div class="metro_input_contain">
            <label for="Name" class="metro_input_caption">
                產品名稱
            </label>
            @Html.TextBoxFor(m => m.Name, new { @class = "metro_input_textinput one_line"})
        </div>
        <div class="metro_input_contain productType">
            <label for="Name" class="metro_input_caption">
                產品類別
            </label>
            <div class="metro_input_dropdownselect">
                <ul class="treeview" id="tree">
                </ul>
            </div>
            <label class="metro_input_trigger_dropdown one_line">
                <a class="metro_input_select_btn"><span class="productTypeValue">@Model.ProductType</span> <span class="metro_trigger_dropdown">▼</span></a>
            </label>
            @Html.HiddenFor(m => m.ProductTypeID)
        </div>
        <div class="metro_input_contain">
            <label for="Brand" class="metro_input_caption">
                品牌
            </label>
            @Html.TextBoxFor(m => m.Brand, new { @class = "metro_input_textinput one_line"})
        </div>
        <div class="metro_input_contain">
            <label for="Model" class="metro_input_caption">
                型號
            </label>
            @Html.TextBoxFor(m => m.Model1, new { @class = "metro_input_textinput one_line"})
        </div>
        <div class="metro_input_contain">
            <label for="ListPrice" class="metro_input_caption">
                標價
            </label>
            @Html.TextBoxFor(m => m.ListPrice, new { @class = "metro_input_textinput one_line"})
        </div>
    }
</div>
<script>
    function confirm() {
        if (!valEmpty($("#Name"))) {
            showError("產品名稱是必要欄位不可留白");
            return;
        }

        if (!valEmptyH($(".productTypeValue"))) {
            showError("產品類別是必要欄位不可留白");
            return;
        }

        $('form').submit();
    }
    function initDropdown($part) {
        var $current_trigger_dropdown;
        $('.metro_input_trigger_dropdown', $part).unbind('click').bind('click', function (e) {
            e.stopPropagation();
            $current_trigger_dropdown = $(this);
            $('.metro_input_dropdownselect', $part).css({ left: $current_trigger_dropdown.position().left });
            $('.metro_input_dropdownselect', $part).width($current_trigger_dropdown.width()-2);
            $('.metro_input_dropdownselect', $part).show();
        });
        $('.treeNode', $part).unbind('click').bind('click', function () {
            $('.productTypeValue', $part).html($(this).attr('productTypeFullName'));
            $('#ProductTypeID', $part).val($(this).attr('productTypeID'));
            $('.metro_input_dropdownselect', $part).hide();
        });
        $('.treeview', $part).unbind('click').bind('click', function (e) {
            e.stopPropagation();
        });
    }
    function loadProductTypes() {
        var url = "/Home/GetProductTypes";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#treeNodeTemplate').tmpl(result).appendTo($('#tree'));

                $('#tree').treeview({
                    collapsed: true,
                    animated: 'fast',
                    prerendered: true,
                    persist: 'location'
                });

                $('.treeNode', '#tree').unbind('click').bind('click', function () {
                    $('.treeNode:not(.hover)', '#tree').removeClass('selected');
                    $(this).addClass('selected');
                });
                $('.treeNode:odd', '#tree').addClass('odd');
                $('.treeNode:even', '#tree').addClass('even');

                initDropdown('.productType');

                hideLoading();
            }
        });
    };
    function adjustMetroInputContain() {
        var maxCaptionWidth = $.fn.calcMaxWidth($('.metro_input_caption'));
        $('.metro_input_caption').each(function () {
            $(this).width(maxCaptionWidth);
        });
    }
</script>
